<!--项目看板---投入预算总览 -->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <span class="header">投入预算总览</span>
      </div>
      <div class="box">
        <div style="font-weight: bold">蚂蚁森林投入造林资金4275000元</div>
        <div id="budgetChart" style="width: 100%;height:260px"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'budgetOverview',
  data() {
    return {

    }
  },
  mounted() {
    setTimeout(() => {
      //页面大小适配
      var chartDom = document.getElementById('budgetChart');
      let myChart = echarts.init(chartDom);
      const chartObserver = new ResizeObserver(() => {
        myChart.resize();
      });
      chartObserver.observe(chartDom);
      //图表样式
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('budgetChart')
      const chart = echarts.init(ctx)
      const datas = [
        {
          name: '人工造林费',
          value: 3768850
        },
        {
          name: '网国栏费费',
          value: 459400
        },
        {
          name: '标示牌费',
          value: 4000
        },
        {
          name: '设计费',
          value: 42750
        }
      ]

      let option = {
        color: ['#abd79e', 'green', 'lightgreen', '#E3F170'],
        legend: {
          top: 'center',
          right: '15%',
          orient: 'vertical',
          data:datas
        },
        tooltip: {
          fontSize:'12',
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '80%'],
            center: ['35%', '50%'],
            roseType: 'radius',
            label: {
              formatter: '{d}%'
            },
            labelLine: {
              length: 1,
              length2: 20
            },
            data: datas
          }
        ]
      }

      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.header {
  color: #11A983;
}

.box-card{
  margin-bottom: 10px;
  height: 389px;
}
</style>
